<template>
  <div>
    <el-menu
      class="el-menu-vertical-demo"
      router
      active-text-color="#a37e48"
      :unique-opened="true"
      :default-active="$route.path"
      @open="handleOpen"
    >
      <el-submenu
        :index="item.route + ':' + item.name"
        v-for="(item, index) in site.menu"
        :key="index"
      >
        <template slot="title">
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group v-if="item.route == '/product'">
          <el-menu-item
            v-for="menu in category_list"
            :key="menu.id"
            :index="menu.url"
            >{{ menu.title }}
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group v-else-if="item.route == '/styles'">
          <el-menu-item
            v-for="menu in style_list"
            :key="menu.id"
            :index="menu.url"
            >{{ menu.title }}</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group v-else="item.child">
          <el-menu-item
            v-for="menu in item.child"
            :key="menu.id"
            :index="menu.route"
            >{{ menu.name }}</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "loginView",
  data() {
    return {
      menu: [],
      style_list: [],
      category_list: [],
    };
  },

  computed: {
    ...mapState(["site"]),
  },
  mounted() {
    this.getCondition();
  },
  methods: {
    handleOpen(key) {
      const path = key.split(":")[0];
      if (path != "false" && path != "/product" && path != "/styles") {
        this.$router.push(path);
      }
    },
    getCondition() {
      this.$post("/api/index/get_product_condition").then((res) => {
        this.style_list = res.data.styles;
        this.category_list = res.data.categories;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-menu-item {
  .info {
    width: 50px;
    height: 20px;
    border: 1px solid #c00;
    float: left;
    position: relative;
  }
}
</style>
